<template>
    <div style="min-width: 809px">
        <div class="vs-search-box">
            <div class="vs-table-box">
                <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                    <el-form-item label="">
                        <div style="width: 400px">
                            <el-input placeholder="请输入姓名或手机号或会员卡号" v-model="paging.keys">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                <template slot="append">
                                    <div style="cursor: pointer" @click="search()">
                                        查找会员
                                    </div>
                                </template>
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="查询时间段：" style="margin-left: 20px">
                        <el-date-picker v-model="paging.bill_time_start" type="datetimerange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 300px">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="vs-search-box">
            <el-table border ref="tableData" :data="tableData" style="width: 100%">
                <el-table-column type="selection"> </el-table-column>
                <el-table-column label="Id" prop="ID"> </el-table-column>
                <el-table-column label="发送时间" prop="发送时间"> </el-table-column>
                <el-table-column label="发送内容" prop="发送内容"> </el-table-column>
            </el-table>
            <div class="vs-paging-box">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="total, sizes, prev, pager, next, jumper" :total="paging.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
// import { join } from 'mock/user';
export default {
    data() {
        return {
            birthday_content: "",
            form: {

            },
            paging: {
                page: 1,
                limit: 10,
                total: 0,
                bill_time_start: "",
                keys: "",
                start_date_: "",
                end_date: "",
            },
            dialogVisible: false,
            tableData: [],
        };
    },
    created() {
        this.getList();
    },
    mounted() { },
    filters: {
        rtBrithday(val) {
            if (val) {
                return val.split("-")[1] + "-" + val.split("-")[2];
            }
            return val;
        },
    },
    methods: {
        setRow(row) {
            //详情


        },
        reset() {
            //重置
            this.paging = this.$options.data().paging
            this.handleCurrentChange(1);
        },
        //搜索
        search() {
            this.getList();
        },
        //更新短信模板
        async subContent() {
            let { code, data } = await this.$Http.setBirthdayContent({
                birthday_content: this.birthday_content,
            });
            if (code == 10000) {
                this.$message.success("编辑成功");
                this.dialogVisible = false;
            }
        },
        //导出文件
        async exportFile() {
            if (!this.$refs.tableData.selection.length) {
                return this.$message.warning("请选择您要导出的会员");
            }
            let arr = [];
            this.$refs.tableData.selection.forEach((e) => {
                arr.push(e.id);
            });
            this.utils.exportFile(
                "store/user/exportBirthday",
                "会员生日提醒列表",
                arr.join(",")
            );
        },
        //发送短信
        async setSms() {
            if (!this.$refs.tableData.selection.length) {
                return this.$message.warning("请选择您要发送的会员");
            }
            let arr = [];
            this.$refs.tableData.selection.forEach((e) => {
                arr.push(e.id);
            });
            let { code, data } = await this.$Http.setSms({
                ids: arr.join(","),
                type: 3, //3生日通知 ， 4 久未到店
            });
        },
        //列表
        async getList() {
            if (this.paging.bill_time_start) {
                this.paging.date_start = this.paging.bill_time_start[0];
                this.paging.date_end = this.paging.bill_time_start[1];
            }
            let { code, data } = await this.$Http.getBirthday(
                this.paging
            );
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total
            }
        },
        dialogBeforeClose() {
            this.dialogVisible = false;
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.getList();
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep {
    .el-dialog__body {
        padding: 10px 20px;
        border-top: 1px solid rgba($color: #000000, $alpha: 0.2);
    }
}

.image-thumbnail {
    width: 130px;
    height: 130px;
}

.vs-table-box {
    display: flex;
}

.dialog_body {
    display: flex;
    flex-direction: column;
    text-align: left;

    > div:first-child {
        margin: 10px 0;
    }

    .d_body {
        display: flex;
        border: 1px solid rgba($color: #000000, $alpha: 0.1);
        padding: 10px;

        > div:last-child {
            display: flex;
            flex-direction: column;
            margin: 0 20px;

            // .ipt_body {
            //   width: 250px ;
            //   height: 100px;
            //     border: 1px solid rgba($color: #000000, $alpha: .3);

            // }

            > div:last-child {
                margin-top: 20px;
                text-align: right;
            }
        }
    }
}
</style>
